<template>
  <div class="container">
    <!--  搜索  -->
    <div class="bg-sear">
      <div class="scrolltop">
        <div class="section" @click="goSearch">
          <img
            src="../../static/images/icon/search.png"
            alt=""
            class="search-img"
          />
          <span class="placeholder">搜索</span>
        </div>
      </div>
    </div>
    <!--  轮播图 | 新品推荐 / 限时特惠 / 每日疯抢 | 公告  -->
    <div class="content">
      <Content></Content>
    </div>
    <!--  商城热卖  -->
    <div class="hot-sale">
      <HotSale :tagList="tagList"></HotSale>
    </div>
    <!--  更多宝贝  -->
    <div class="more-prod">
      <MoreProd :tagList="tagList"></MoreProd>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import Content from "@/components/home/Content";
import HotSale from "@/components/home/HotSale";
import MoreProd from "@/components/home/MoreProd";
export default {
  components: {
    Content,
    HotSale,
    MoreProd,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      tagList: (state) => state.home.tagList,
    }),
  },
  methods: {
    ...mapActions({
      homeTagList: "home/homeTagList",
    }),
    goSearch() {
      wx.navigateTo({
        url: "../search-page/index",
      });
    },
  },
  mounted() {
    this.homeTagList();
  },
  onPullDownRefresh () {
    console.log("onPullDownRefresh");
  },
};
</script>

<style scoped>
.container .bg-sear {
  position: fixed;
  z-index: 999;
  width: 100%;
  line-height: 56rpx;
  background: #fff;
  padding-bottom: 20rpx;
  text-align: center;
  top: 0;
}
.bg-sear .section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60rpx;
  background: #fff;
  z-index: 1;
  border-radius: 50rpx;
  width: 92%;
  margin: auto;
  left: 4%;
  background: #f7f7f7;
}
.bg-sear .section .search-img {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}
.bg-sear .section .placeholder {
  display: block;
  font-size: 24rpx;
  color: #999;
}
</style>
